<template>
	<view class="container">
		<block v-for="(poetry,index ) in poetryList" :key="index">
			<view class="poetry-class" @click="onPoetryItemClick(poetry)">
				<text class="poetry-line text-font poetry-title">{{poetry.title}}</text>
				<view class="poetry-author">
					<text class="poetry-line text-font">{{poetry.time}}</text>
					<text class="poetry-line text-font">{{poetry.author}}</text>
				</view>
				<view class="content-ver">
					<block v-for="(item,index) in poetry.content" :key="index">
						<text class="poetry-line">{{item}}</text>
					</block>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		poetryDetail
	} from '@/router.js'
	export default {
		data() {
			return {
				poetry1: {
					title: '《咏鹅》',
					time: '[唐]',
					author: '骆宾王',
					content: [
						'鹅，鹅，鹅，曲项向天歌。',
						'白毛浮绿水，红掌拨清波。'
					]
				},
				poetryList: []
			}
		},
		onLoad(options) {
			let title = decodeURIComponent(options.title)
			this.getGradePoetry(title)
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			//诗词列表点击监听
			onPoetryItemClick(poetry) {
				poetry = encodeURIComponent(JSON.stringify(poetry))
				uni.navigateTo({
					url: poetryDetail + `?poetry=${poetry}`
				})
			},
			getGradePoetry(title) {
				uniCloud.callFunction({
					name: "database",
					data: {
						collection: 'poetry',
						type: 'grade',
						title: title
					},
					success: (res) => {
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							let poetryList = result[0].poetrys
							this.poetryList = poetryList
						}
					}
				})
			}
		}
	}
</script>

<style>
	.poetry-class {
		display: flex;
		flex-direction: column;
		width: 90%;
		background: #d6cebf;
		border-radius: 6px;
		margin: 10px 5%;
		padding: 20px 0;
		color: #414444;
	}

	.poetry-title {
		font-size: 20px;
		font-weight: 600;
	}

	.poetry-author {
		text-align: center;
		margin: 5px;
	}

	.poetry-line {
		text-align: center;
		line-height: 25px;
	}
</style>
